import {Slider, Space, Typography} from "antd";
import {useMemo, useState} from "react";
import {CheckOutlined, HighlightOutlined, SmileFilled, SmileOutlined} from "@ant-design/icons";
///    排印，印刷格式
const {Title,Paragraph,Text,Link}  = Typography

const EllipsisMiddle:React.FC<{suffixCount:number,children:string}> = ({suffixCount,children})=>{
    var start = children.slice(0,children.length  - suffixCount).trim();

    const suffix = children.slice(-suffixCount).trim()

//  除开后缀，中间那部分省略
    return <Text ellipsis={{suffix}}>
        {start}
    </Text>

}


const article  =      "To be, or not to be, that is a question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life";


function CcTypography(){

    const [editableStr, setEditableStr] = useState()

    const [editableStrWithSuffix, setEditableStrWithSuffix] = useState('This is a ' +
        'loooooooooooooooooooooooooooooooong editable text with suffix.',)


    // 缓存计算结果
    const [editableStrWithSuffixStartPart,editableStrWithSuffixSuffixPart] = useMemo(() => {
        return [editableStrWithSuffix.slice(0,-12),editableStrWithSuffix.slice(-12)]
    }, [editableStrWithSuffix]);


    const [ellipsis, setEllipsis] = useState(false)
    const [rows, setRows] = useState(1)

    return (

        <div>
            {/*<Slider */}
            <Slider value={rows} min={1} max={10} onChange={setRows}/>
            <Paragraph
                ellipsis={{
                    rows:rows,
                    suffix:"--William 1231",
                    expandable:true,
                    onEllipsis:ellipsis=> {
                        console.log("ellipsis change",ellipsis)
                    }
                }}
                title={`${article}--William Shakespeare`}
            >
                {article}
            </Paragraph>


            <EllipsisMiddle suffixCount={12}>
                In the process of internal desktop applications development, many different design specs and
                implementations would be involved, which might cause designers and developers difficulties and
                duplication and reduce the efficiency of development.12311231312111
            </EllipsisMiddle>

            <Paragraph ellipsis={{rows:2,expandable:true,symbol:"more sasdfa",tooltip:"123"}} style={{width:600}}>
                Ant Design, a design language for background applications, is refined by Ant UED Team. Ant
                Design, a design language for background applications, is refined by Ant UED Team. Ant
                Design, a design language for background applications, is refined by Ant UED Team. Ant
                Design, a design language for background applications, is refined by Ant UED Team. Ant
                Design, a design language for background applications, is refined by Ant UED Team. Ant
                Design, a design language for background applications, is refined by Ant UED Team.
            </Paragraph>



        <Typography.Title level={1} editable copyable={{text:"hello world"}}>
            ant design
        </Typography.Title>d

            <Typography.Title level={2} editable copyable={{text:"hello world",
                icon:[<SmileOutlined></SmileOutlined>,<SmileFilled></SmileFilled>],
                tooltips:["click hear","you clicked"]
            }}>
                ant design
            </Typography.Title>

            <Typography>
                <Paragraph

                    editable={{
                        maxLength:50,
                        autoSize: {maxRows:5,minRows:3},
                        enterIcon: <CheckOutlined />,
                        icon:<HighlightOutlined/>,
                        tooltip:"click to edit",
                        onChange:setEditableStrWithSuffix,
                        text:editableStrWithSuffix
                    }}

                    ellipsis={{
                        suffix:editableStrWithSuffixSuffixPart
                    }}

                >
                    {editableStrWithSuffixStartPart}
                </Paragraph>


                {/*<Title level={2}>introduction</Title>*/}
                {/*<Paragraph>   After massive project practice and s*/}

                {/*    <Text strong >*/}
                {/*        waterkid*/}
                {/*    </Text>*/}

                {/*    <Text code>console.log</Text>*/}

                {/*    ummaries, Ant Design, a design language for background</Paragraph>*/}



                {/*<Paragraph>*/}
                {/*    <ul>*/}
                {/*        <li>*/}
                {/*            <Link href="/">pricipal</Link>*/}
                {/*            <Link href="/">pricipal</Link>*/}
                {/*            <Link href="/">pricipal</Link>*/}
                {/*        </li>*/}
                {/*    </ul>*/}


                {/*    press <Text keyboard>Esc</Text>*/}
                {/*</Paragraph>*/}


                {/*<Space direction="vertical">*/}
                {/*    <Text>ant design</Text>*/}
                {/*    <Text type="secondary">ant design</Text>*/}
                {/*    <Text type="success">ant design</Text>*/}
                {/*    <Text type="warning">ant design</Text>*/}
                {/*    <Text type="danger">ant design</Text>*/}
                {/*    <Text code>ant design</Text>*/}
                {/*    <Text mark>ant design</Text>*/}
                {/*    <Text keyboard>ant design</Text>*/}
                {/*    <Text underline>ant design</Text>*/}
                {/*    <Text delete>ant design</Text>*/}
                {/*    <Text strong>ant design</Text>*/}
                {/*    <Text italic>ant design</Text>*/}


                {/*</Space>*/}


                <div>
                    <Paragraph editable={{onChange:setEditableStr,enterIcon:null

                    }} >{editableStr}</Paragraph>
                </div>

            </Typography>
        </div>

    )
}

export default CcTypography
